<template>
    <div style="margin-left: 10px;">
        <div style="margin-top: 20px;">
            <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
                <el-form-item label="旅客姓名" prop="pname">
                    <el-input v-model="formData.pname" placeholder="请输入旅客姓名" clearable :style="{ width: '60%' }">
                    </el-input>
                </el-form-item>
                <el-form-item label="旅客手机号" prop="phone">
                    <el-input v-model="formData.phone" placeholder="请输入旅客手机号" clearable :style="{ width: '60%' }">
                    </el-input>
                </el-form-item>
                <el-form-item label="日期范围" prop="staydate">
                    <el-date-picker type="daterange" v-model="stayTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                        :style="{ width: '60%' }" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至"
                        clearable></el-date-picker>
                </el-form-item>
                <el-form-item label="支付方式" prop="status">
                    <el-select v-model="formData.status" placeholder="请选择支付方式" clearable :style="{ width: '60%' }">
                        <el-option v-for="(item, index) in orderstatusOptions" :key="index" :label="item.label"
                            :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div style="text-align: left; margin: 4px; font-weight: bold; color: #606266;">选择房间</div>
        <div>
            <el-table :data="freeRoomList" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="id" align="center" prop="id" />
                <el-table-column label="房间号" align="center" prop="rnum" />
                <el-table-column label="客房标题" align="center" prop="rname" />
                <el-table-column label="床位数" align="center" prop="people" />
                <el-table-column label="房间价格" align="center" prop="price" />
            </el-table>

        </div>
        <div style="margin-top: 20px;">
            <el-button type="primary" @click="submitForm">提交预定</el-button>
            <el-button @click="resetForm">重置信息</el-button>
            <el-button type="success" @click="getfreeRooms">刷新房源</el-button>
        </div>

        <!-- <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button> -->

        <el-dialog title="请确认订单" :visible.sync="dialogFormVisible">
            <el-form :model="formData">
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="formData.pname" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="电话" :label-width="formLabelWidth">
                    <el-input v-model="formData.phone" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="入住时间" :label-width="formLabelWidth">
                    <el-input v-model="formData.intime" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="离店时间" :label-width="formLabelWidth">
                    <el-input v-model="formData.outtime" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="入住天数" :label-width="formLabelWidth">
                    <el-input v-model="stayDays" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="房间号" :label-width="formLabelWidth">
                    <el-input v-model="formData.rnum" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="房间名" :label-width="formLabelWidth">
                    <el-input v-model="formData.rname" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="订单金额" :label-width="formLabelWidth">
                    <el-input v-model="formData.money" autocomplete="off" :disabled="true"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitAdd">确 定</el-button>
            </div>
        </el-dialog>



    </div>
</template>
<script>
import { addRoomOrder, findFreeRooms } from '../../../api/shx/orders/orders';

export default {
    components: {},
    props: [],
    data() {
        return {
            dialogFormVisible: false,
            freeRoomList: [],
            stayTime: [],
            stayDays: undefined,
            OrderPrice: undefined,
            formData: {
                pname: undefined,
                phone: undefined,
                intime: undefined,
                outtime: undefined,
                status: undefined,
                rname: undefined,
                rnum: undefined,
                createtime: undefined,
                money: undefined,
                del: 0,
            },
            rules: {
                pname: [{
                    required: true,
                    message: '请输入旅客姓名',
                    trigger: 'blur'
                }],
                phone: [{
                    required: true,
                    message: '请输入旅客手机号',
                    trigger: 'blur'
                }],
                staydate: [{
                    required: true,
                    type: 'array',
                    message: '请至少选择一个staydate',
                    trigger: 'change'
                }],
                orderstatus: [{
                    required: true,
                    message: '请选择支付方式',
                    trigger: 'change'
                }],
            },
            orderstatusOptions: [{
                "label": "预定",
                "value": 1
            }, {
                "label": "全款",
                "value": 2
            }],
            formLabelWidth: '120px'
        }
    },
    computed: {},
    watch: {},
    created() {
        this.$watch('stayTime', this.handleStayTimeChange);
        this.getfreeRooms();

    },
    mounted() { },
    methods: {
        handleSelectionChange(selectedRows) {
            console.log(selectedRows);
            if (selectedRows.length > 0) {
                this.formData.rnum = selectedRows[0].rnum;
                this.formData.rname = selectedRows[0].rname;
                // 获取订单金额
                this.formData.money = selectedRows[0].price * this.stayDays;
            }

        },
        handleStayTimeChange(date, oldValue) {
            const date1 = new Date(date[0]);
            const date2 = new Date(date[1]);
            console.log(date1);
            console.log(date2);
            // 计算入住天数
            const timeDiff = Math.abs(date2 - date1);
            this.stayDays = Math.ceil(timeDiff / (1000 * 3600 * 24))
            console.log("入住" + this.stayDays + "天");
        },
        async submitForm() {
            console.log("点击提交");
            this.getCurrentTime()
            this.getStayDate(this.stayTime)
            console.log(this.formData);
            this.dialogFormVisible = true

        },
        // 确认新增
        async submitAdd() {
            console.log(this.formData);

            await addRoomOrder(this.formData).then(response => {
                console.log(response);
                this.$message({
                    message: '预定成功',
                    type: 'success'
                });
            })
            this.getfreeRooms;
            this.resetForm
            this.dialogFormVisible = false
        },
        resetForm() {
            this.$refs['elForm'].resetFields()
        },
        getfreeRooms() {
            findFreeRooms().then(response => {
                this.freeRoomList = response.data;
                console.log(this.freeRoomList);
                this.$message({
                    message: '房源刷新成功',
                    type: 'success'
                });
            })
        },
        getStayDate(date) {
            this.formData.intime = date[0];
            this.formData.outtime = date[1];
            console.log(this.formData.intime);
            console.log(this.formData.outtime);
        },
        getCurrentTime() {
            const now = new Date();
            // 格式化时间
            const currentTime = `${now.getFullYear()}-${(now.getMonth() + 1)
                .toString()
                .padStart(2, '0')}-${now.getDate()
                    .toString()
                    .padStart(2, '0')} ${now.getHours()
                        .toString()
                        .padStart(2, '0')}:${now.getMinutes()
                            .toString()
                            .padStart(2, '0')}:${now.getSeconds()
                                .toString()
                                .padStart(2, '0')}`;
            this.formData.createtime = currentTime

        }
    }
}

</script>
<style></style>